<template>
	<view class="item">
		<navigator class="item-head" :url="'/pages/index/components/author/index?author='+reply['author']['loginname']">
			<view class="img">
				<image :src="reply['author']['avatar_url']" lazy-load="true"></image>
			</view>
			<view class="short">
				<text class="name">{{reply['author']['loginname']}}</text>
				<text>{{fmDate(reply['create_at'])}}</text>
			</view>
		</navigator>
		<view class="item-content contentHtml" v-html="reply['content'].replace(/\<img/gi, '<img class=\'rich-img\'')"></view>
		<view class="item-footer">
			<view @click="ups(reply['id'])">
				<uni-icons :type="copy_reply['is_uped'] ? 'hand-thumbsup-filled':'hand-thumbsup' " size="20"></uni-icons> {{copy_reply['ups'].length}}人赞
			</view>
			<view @click="openReply(reply['id'], reply['author']['loginname'])">
				<uni-icons type="chat" size="18"></uni-icons> 回复
			</view>
		</view>
	</view>
</template>

<script>
	import {formatDate} from '@/common/utils'
	export default {
		props: ['reply'],
		data (){
			return {
				copy_reply: this.reply
			}
		},
		methods: {
			fmDate (date){
				return formatDate(date)
			},
			// 赞同/取消赞同评论列表某用户
			ups (id){
				const access_token = this.$store.state.access_token
				if(!access_token){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return false
				}
				this.$request.post(`/reply/${id}/ups`, {
					accesstoken: access_token
				}).then(result => {
					if(result.success){
						if(result.action === 'up'){
							this.copy_reply['is_uped'] = true
							this.copy_reply['ups'].push('xxx')
						}else{
							this.copy_reply['is_uped'] = false
							this.copy_reply['ups'].pop()
						}
					}
				})
			},
			// 打开reply-form
			openReply (id, name){
				const access_token = this.$store.state.access_token
				if(!access_token){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					return false
				}
				this.$EventBus.$emit('openPop', {
					id: id,
					name: name
				})
			}
		}
	}
</script>

<style lang="scss">
	.item{
		margin-bottom: 20rpx;
		border-bottom: 1px solid #eee;
		.item-head{
			display: flex;
			.img{
				width: 44px;
			}
			.short{
				flex: 4;
				line-height: normal;
			}
			.name{
				display: block;
				font-size: 14px;
				color: #444;
				&+text{
					font-size: 12px;
					color: #999;
				}
			}
			image{
				width: 36px;
				height: 36px;
				border-radius: 100%;
				border: 1px solid #eee;
			}
		}
		.item-content{
			line-height: 1.2;
			font-size: 14px;
			color: #333;
		}
		.item-footer{
			color: #999;
			view{
				display: inline-block;
				margin-right: 10px;
				font-size: 12px;
			}
			uni-icons,
			.uni-icons,
			text{
				color: $baseColor!important;
			}
		}
	}
</style>
